<template>
  <div class="creates">
    <el-button type="text" @click="bianji()" size="small">编辑</el-button>
    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑数据"
      :visible.sync="dialogFormVisible"
      @opened="typescript"
      :fullscreen="true"
      :modal-append-to-body="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="content">
          <el-form-item label="题目编号" prop="qid">
            <el-input v-model="ruleForm.qid"></el-input>
          </el-form-item>
          <el-form-item label="课程名称" prop="sname">
            <el-input v-model="ruleForm.sname"></el-input>
          </el-form-item>
          <el-form-item label="题目类型" prop="tname">
            <el-select
              v-model="ruleForm.tname"
              placeholder="请选择活动区域"
              :loading="tloading"
              @focus="tseleList()"
            >
              <el-option
                v-for="(v, i) of selList.tname"
                :key="i"
                :label="v.tname"
                :value="v.tname"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" prop="nname">
            <el-select
              v-model="ruleForm.nname"
              placeholder="请选择活动区域"
              :loading="nloading"
              @focus="nseleList()"
            >
              <el-option
                v-for="(v, i) of selList.nname"
                :key="i"
                :label="v.nname"
                :value="v.nname"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="答案" prop="answer">
            <el-input v-model="ruleForm.answer"></el-input>
          </el-form-item>
          <el-form-item label="题干">
            <div ref="box"></div>
          </el-form-item>
        </div>
        <div class="content">
          <el-form-item label="选项">
            <div ref="box1"></div>
          </el-form-item>
          <el-form-item label="知识点">
            <div ref="box2"></div>
          </el-form-item>
          <el-form-item label="解析">
            <div ref="box3"></div>
          </el-form-item>
        </div>
        <div style="clear: both"></div>
        <div class="but">
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              :loading="butLoading"
              >立即添加</el-button
            >
            <el-button
              @click="
                resetForm('ruleForm');
                dialogFormVisible = false;
              "
              >取消</el-button
            >
          </el-form-item>
        </div>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import E from "wangeditor";
import axios from "../../api/home";

export default {
  props: ["msg"],
  data() {
    return {
      ruleForm: {
        answer: "",
        jiexi: "",
        nname: "",
        qid: "",
        sname: "",
        title: "",
        tname: "",
        xuanxiang: "",
        zhishidian: "",
      },
      dialogFormVisible: false,
      typescripts: true,
      rules: {
        qid: [{ required: true, message: "内容不能为空", trigger: "change" }],
        sname: [{ required: true, message: "内容不能为空", trigger: "change" }],
        tname: [{ required: true, message: "内容不能为空", trigger: "change" }],
        nname: [{ required: true, message: "内容不能为空", trigger: "change" }],
      },
      //富文本编辑器数据
      editor: "",
      editor1: "",
      editor2: "",
      editor3: "",
      //富文本菜单
      menus: [
        "head",
        "bold",
        "fontSize",
        "italic",
        "strikeThrough",
        "indent",
        "foreColor",
        "backColor",
        "list",
        "underline",
        "image",
        "splitLine",
        "undo",
        "redo",
      ],
      fontSizes: {
        "x-small": { name: "10px", value: "1" },
        small: { name: "13px", value: "2" },
        normal: { name: "16px", value: "3" },
        large: { name: "18px", value: "4" },
        "x-large": { name: "24px", value: "5" },
        "xx-large": { name: "32px", value: "6" },
        "xxx-large": { name: "48px", value: "7" },
      },
      //下拉框
      selList: {},
      nloading: true,
      tloading: true,
      //添加按钮
      butLoading: false,
    };
  },
  methods: {
    //配置富文本
    typescript() {
      if (this.typescripts) {
        this.typescripts = false;

        this.editor = new E(this.$refs.box);
        this.editor.config.height = 150;
        this.editor.config.menus = this.menus;
        this.editor.config.fontSizes = this.fontSizes;
        this.editor.config.menuTooltipPosition = "down";
        this.editor.create();

        this.editor1 = new E(this.$refs.box1);
        this.editor1.config.height = 150;
        this.editor1.config.menus = this.menus;
        this.editor1.config.fontSizes = this.fontSizes;
        this.editor1.config.menuTooltipPosition = "down";
        this.editor1.config.zIndex = 300;
        this.editor1.create();

        this.editor2 = new E(this.$refs.box2);
        this.editor2.config.height = 150;
        this.editor2.config.menus = this.menus;
        this.editor2.config.fontSizes = this.fontSizes;
        this.editor2.config.menuTooltipPosition = "down";
        this.editor2.config.zIndex = 200;
        this.editor2.create();

        this.editor3 = new E(this.$refs.box3);
        this.editor3.config.height = 150;
        this.editor3.config.menus = this.menus;
        this.editor3.config.fontSizes = this.fontSizes;
        this.editor3.config.menuTooltipPosition = "down";
        this.editor3.config.zIndex = 100;
        this.editor3.create();

        this.editor.txt.html(this.msg.title);
        this.editor1.txt.html(this.msg.tname);
        this.editor2.txt.html(this.msg.zhishidian);
        this.editor3.txt.html(this.msg.jiexi);
      }
    },
    bianji() {
      this.dialogFormVisible = true;
      this.ruleForm = {
        answer: this.msg.answer,
        jiexi: this.msg.jiexi,
        nname: this.msg.nname,
        qid: this.msg.qid,
        sname: this.msg.sname,
        title: this.msg.title,
        tname: this.msg.tname,
        xuanxiang: this.msg.xuanxiang,
        zhishidian: this.msg.zhishidian,
      };
    },
    //上传数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.title = this.editor.txt.html();
          this.ruleForm.xuanxiang = this.editor1.txt.html();
          this.ruleForm.zhishidian = this.editor2.txt.html();
          this.ruleForm.jiexi = this.editor3.txt.html();
          this.butLoading = true;
          axios.update(this.ruleForm).then(() => {
            this.dialogFormVisible = false;
            // this.resetForm("ruleForm");
            this.selList = {};
            this.butLoading = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //清除数据
    resetForm(formName) {
      console.log(formName)
      // this.editor.txt.clear();
      // this.editor1.txt.clear();
      // this.editor2.txt.clear();
      // this.editor3.txt.clear();
      // this.$refs[formName].resetFields();
      // this.ruleForm = {
      //   answer: "",
      //   jiexi: "",
      //   nname: "",
      //   qid: "",
      //   sname: "",
      //   title: "",
      //   tname: "",
      //   xuanxiang: "",
      //   zhishidian: "",
      // };
    },
    //添加下拉菜单
    tseleList() {
      axios.tseleLise().then((res) => {
        this.selList.tname = res.data;
        this.tloading = false;
      });
    },
    nseleList() {
      axios.nseleLise().then((res) => {
        this.selList.nname = res.data;
        this.nloading = false;
      });
    },
  },
  mounted() {
    // this.seleList();
  },
};
</script>
<style scoped>
.crebut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.content {
  width: 50%;
  float: left;
}
.but {
  position: relative;
  top: -63px;
}
</style>
